<script setup lang="ts">

</script>

<template>
  <div data-n-ids="{&quot;ndashboard:panel-0&quot;:&quot;ndashboard:panel-0&quot;}"
       class="flex-col items-stretch relative w-full border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-800 lg:w-[--width] flex-shrink-0 hidden lg:flex"
       style="--width: 250px;"><!--[-->
    <div
        class="h-[--header-height] flex-shrink-0 flex items-center border-b border-gray-200 dark:border-gray-800 px-4 gap-x-4 min-w-0 !border-transparent">
      <div class="flex items-center justify-between flex-1 gap-x-1.5 min-w-0">
        <div class="flex items-stretch gap-1.5 min-w-0 flex-1"><!--[-->
          <button type="button"
                  class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center lg:hidden"
                  aria-label="Open sidebar"><!--[--><!--[--><span
              class="i-heroicons-bars-3-20-solid flex-shrink-0 h-5 w-5" aria-hidden="true"></span><!--]--><!--[-->
            <!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--[-->
          <div data-headlessui-state="" class="relative inline-flex text-left rtl:text-right w-full">
            <div id="headlessui-menu-button-nJaOAU8Fbyl-1" aria-haspopup="menu" aria-expanded="false"
                 data-headlessui-state="" class="inline-flex w-full" role="button"
                 data-n-ids="{&quot;nJaOAU8Fbyl-0&quot;:&quot;nJaOAU8Fbyl-1&quot;}"><!--[-->
              <button type="button"
                      class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center w-full">
                <!--[--><!--[--><!----><!--]--><!--[--><span
                  class="relative inline-flex items-center justify-center flex-shrink-0 rounded-full h-5 w-5 text-[10px]"><img
                  class="rounded-full h-5 w-5 text-[10px]"
                  src="https://avatars.githubusercontent.com/u/23360933?s=200&amp;v=4"><!----><!--[-->
                <!--]--></span><span class="truncate text-gray-900 dark:text-white font-semibold">Nuxt</span><!--]-->
                <!--[--><!----><!--]--><!--]--></button><!--]--></div><!----></div><!--]--></div><!----><!----></div>
    </div>
    <div class="flex flex-col w-full flex-1 relative overflow-hidden">
      <div class="flex-grow flex flex-col min-h-0 gap-y-2 py-2">
        <div class="w-full flex flex-col px-4"><!--[-->
          <button type="button"
                  class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center"
                  aria-label="Search"><!--[--><!--[--><span
              class="i-heroicons-magnifying-glass-20-solid flex-shrink-0 h-5 w-5" aria-hidden="true"></span><!--]-->
            <!--[--><span class="text-left break-all line-clamp-1">Search...</span><!--]--><!--[-->
            <div class="hidden lg:flex items-center gap-0.5 ml-auto -my-1 flex-shrink-0"><kbd
                class="inline-flex items-center justify-center text-gray-900 dark:text-white h-5 min-w-[20px] text-[11px] px-1 rounded font-medium font-sans bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-300 dark:ring-gray-700 ring-inset">
              <!--[-->Ctrl<!--]--></kbd><kbd
                class="inline-flex items-center justify-center text-gray-900 dark:text-white h-5 min-w-[20px] text-[11px] px-1 rounded font-medium font-sans bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-300 dark:ring-gray-700 ring-inset">
              <!--[--> K <!--]--></kbd></div><!--]--><!--]--></button><!--]--></div>
        <div class="flex-1 px-4 flex flex-col gap-y-2 overflow-y-auto"><!--[-->
          <ul class="relative !min-h-[auto] !min-w-[auto]"><!--[-->
            <li tag="li" class="!overflow-visible">
              <div default-open="true" as="div">
                <div as="template">
                  <div class="flex"><!--[--><!--[--><a
                      class="group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                      draggable="false" href="/"><!--[--><!--[--><span
                      class="i-heroicons-home flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span>
                    <!--]--><!--[--><span class="text-sm truncate relative"><!----> Home</span><!--]--><!----><!--[-->
                    <!----><!--]--><!--]--></a><!--]--><!--]--><!----></div>
                </div><!----></div>
            </li>
            <li tag="li" class="!overflow-visible">
              <div default-open="true" as="div">
                <div as="template">
                  <div class="flex"><!--[--><!--[--><a
                      class="group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                      draggable="false" href="/inbox"><!--[--><!--[--><span
                      class="i-heroicons-inbox flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span>
                    <!--]--><!--[--><span class="text-sm truncate relative"><!----> Inbox</span><!--]--><!---->
                    <!--[--><span
                        class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 flex-shrink-0 ml-auto relative rounded"><!--[-->4
                      <!--]--></span><!--]--><!--]--></a><!--]--><!--]--><!----></div>
                </div><!----></div>
            </li>
            <li tag="li" class="!overflow-visible">
              <div default-open="true" as="div">
                <div as="template">
                  <div class="flex"><!--[--><!--[--><a
                      class="group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                      draggable="false" href="/users"><!--[--><!--[--><span
                      class="i-heroicons-user-group flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span>
                    <!--]--><!--[--><span class="text-sm truncate relative"><!----> Users</span><!--]--><!----><!--[-->
                    <!----><!--]--><!--]--></a><!--]--><!--]--><!----></div>
                </div><!----></div>
            </li>
            <li tag="li" class="!overflow-visible">
              <div data-headlessui-state="open"
                   data-n-ids="{&quot;nXyoT3QGqRy-0&quot;:&quot;nXyoT3QGqRy-8&quot;,&quot;nXyoT3QGqRy-1&quot;:&quot;nXyoT3QGqRy-9&quot;}">
                <div class="flex" id="headlessui-disclosure-button-nXyoT3QGqRy-8" aria-expanded="true"
                     aria-controls="headlessui-disclosure-panel-nXyoT3QGqRy-9" data-headlessui-state="open"><!--[-->
                  <button type="button"
                          class="group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                          draggable="false"><!--[--><!--[--><span
                      class="i-heroicons-cog-8-tooth flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span>
                    <!--]--><!--[--><span class="text-sm truncate relative"><!----> Settings</span><!--]--><span
                        class="i-heroicons-chevron-down-20-solid ml-auto w-5 h-5 transform transition-transform duration-200 flex-shrink-0"></span>
                    <!--[--><!----><!--]--><!--]--></button><!--]--><!----></div>
                <ul class="relative !min-h-[auto] !min-w-[auto]" id="headlessui-disclosure-panel-nXyoT3QGqRy-9"
                    data-headlessui-state="open"><!--[-->
                  <li tag="li" class="!overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[--><!--[--><a
                            class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800"
                            draggable="false" href="/settings"><!--[--><!--[--><span
                            class="w-px h-full mx-[9.5px] bg-gray-200 dark:bg-gray-700 relative after:absolute after:z-[1] after:w-px after:h-full after:bg-gray-200 after:dark:bg-gray-700 after:transform after:translate-y-full after:inset-x-0"><span
                            class="w-1 h-1 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-900 dark:bg-white"></span></span>
                          <!--]--><!--[--><span class="text-sm truncate relative"><span
                              class="sr-only"> Current page: </span> General</span><!--]--><!----><!--[--><!---->
                          <!--]--><!--]--></a><!--]--><!--]--><!----></div>
                      </div><!----></div>
                  </li>
                  <li tag="li" class="!overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[--><!--[--><a
                            class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                            draggable="false" href="/settings/members"><!--[--><!--[--><span
                            class="w-px h-full mx-[9.5px] bg-gray-200 dark:bg-gray-700 relative after:absolute after:z-[1] after:w-px after:h-full after:bg-gray-200 after:dark:bg-gray-700 after:transform after:translate-y-full after:inset-x-0"><span
                            class="w-1 h-1 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-400 dark:bg-gray-500 group-hover:bg-gray-700 dark:group-hover:bg-gray-200"></span></span>
                          <!--]--><!--[--><span class="text-sm truncate relative"><!----> Members</span><!--]--><!---->
                          <!--[--><!----><!--]--><!--]--></a><!--]--><!--]--><!----></div>
                      </div><!----></div>
                  </li>
                  <li tag="li" class="!overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[--><!--[--><a
                            class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                            draggable="false" href="/settings/notifications"><!--[--><!--[--><span
                            class="w-px h-full mx-[9.5px] bg-gray-200 dark:bg-gray-700 relative"><span
                            class="w-1 h-1 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-400 dark:bg-gray-500 group-hover:bg-gray-700 dark:group-hover:bg-gray-200"></span></span>
                          <!--]--><!--[--><span class="text-sm truncate relative"><!----> Notifications</span><!--]-->
                          <!----><!--[--><!----><!--]--><!--]--></a><!--]--><!--]--><!----></div>
                      </div><!----></div>
                  </li><!--]--></ul>
              </div>
            </li><!--]--></ul>
          <div class="flex items-center align-center text-center w-full flex-row">
            <div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><!----></div>
          <ul class="relative !min-h-[auto] !min-w-[auto]"><!--[-->
            <li tag="li" class="!overflow-visible">
              <div data-headlessui-state="open"
                   data-n-ids="{&quot;nXyoT3QGqRy-0&quot;:&quot;nXyoT3QGqRy-10&quot;,&quot;nXyoT3QGqRy-1&quot;:&quot;nXyoT3QGqRy-11&quot;}">
                <div class="flex" id="headlessui-disclosure-button-nXyoT3QGqRy-10" aria-expanded="true"
                     aria-controls="headlessui-disclosure-panel-nXyoT3QGqRy-11" data-headlessui-state="open"><!--[-->
                  <button type="button"
                          class="group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                          draggable="false"><!--[--><!--[--><!----><!--]--><!--[--><span
                      class="text-sm truncate relative"><!----> Colors</span><!--]--><span
                      class="i-heroicons-chevron-down-20-solid ml-auto w-5 h-5 transform transition-transform duration-200 flex-shrink-0"></span>
                    <!--[--><!----><!--]--><!--]--></button><!--]--><!----></div>
                <ul class="smooth-dnd-container vertical relative !min-h-[auto] !min-w-[auto]"
                    id="headlessui-disclosure-panel-nXyoT3QGqRy-11" data-headlessui-state="open"><!--[-->
                  <li class="smooth-dnd-draggable-wrapper !overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[-->
                          <button type="button"
                                  class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800"
                                  draggable="false"><!--[--><!--[-->
                            <div
                                class="relative inline-flex items-center justify-center flex-shrink-0 flex-shrink-0 flex-shrink-0 mx-2.5">
                              <!--[--><!--]--><span
                                class="absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform bg-green-500 dark:bg-green-400"><!--[-->
                              <!--]--></span></div><!--]--><!--[--><span class="text-sm truncate relative"><span
                                class="sr-only"> Current page: </span> green</span><!--]--><!----><!--[--><!---->
                            <!--]--><!--]--></button><!--]--><!----></div>
                      </div><!----></div>
                  </li>
                  <li class="smooth-dnd-draggable-wrapper !overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[-->
                          <button type="button"
                                  class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                                  draggable="false"><!--[--><!--[-->
                            <div
                                class="relative inline-flex items-center justify-center flex-shrink-0 flex-shrink-0 flex-shrink-0 mx-2.5">
                              <!--[--><!--]--><span
                                class="absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform bg-teal-500 dark:bg-teal-400"><!--[-->
                              <!--]--></span></div><!--]--><!--[--><span
                                class="text-sm truncate relative"><!----> teal</span><!--]--><!----><!--[--><!---->
                            <!--]--><!--]--></button><!--]--><!----></div>
                      </div><!----></div>
                  </li>
                  <li class="smooth-dnd-draggable-wrapper !overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[-->
                          <button type="button"
                                  class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                                  draggable="false"><!--[--><!--[-->
                            <div
                                class="relative inline-flex items-center justify-center flex-shrink-0 flex-shrink-0 flex-shrink-0 mx-2.5">
                              <!--[--><!--]--><span
                                class="absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform bg-cyan-500 dark:bg-cyan-400"><!--[-->
                              <!--]--></span></div><!--]--><!--[--><span
                                class="text-sm truncate relative"><!----> cyan</span><!--]--><!----><!--[--><!---->
                            <!--]--><!--]--></button><!--]--><!----></div>
                      </div><!----></div>
                  </li>
                  <li class="smooth-dnd-draggable-wrapper !overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[-->
                          <button type="button"
                                  class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                                  draggable="false"><!--[--><!--[-->
                            <div
                                class="relative inline-flex items-center justify-center flex-shrink-0 flex-shrink-0 flex-shrink-0 mx-2.5">
                              <!--[--><!--]--><span
                                class="absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform bg-sky-500 dark:bg-sky-400"><!--[-->
                              <!--]--></span></div><!--]--><!--[--><span
                                class="text-sm truncate relative"><!----> sky</span><!--]--><!----><!--[--><!---->
                            <!--]--><!--]--></button><!--]--><!----></div>
                      </div><!----></div>
                  </li>
                  <li class="smooth-dnd-draggable-wrapper !overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[-->
                          <button type="button"
                                  class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                                  draggable="false"><!--[--><!--[-->
                            <div
                                class="relative inline-flex items-center justify-center flex-shrink-0 flex-shrink-0 flex-shrink-0 mx-2.5">
                              <!--[--><!--]--><span
                                class="absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform bg-blue-500 dark:bg-blue-400"><!--[-->
                              <!--]--></span></div><!--]--><!--[--><span
                                class="text-sm truncate relative"><!----> blue</span><!--]--><!----><!--[--><!---->
                            <!--]--><!--]--></button><!--]--><!----></div>
                      </div><!----></div>
                  </li>
                  <li class="smooth-dnd-draggable-wrapper !overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[-->
                          <button type="button"
                                  class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                                  draggable="false"><!--[--><!--[-->
                            <div
                                class="relative inline-flex items-center justify-center flex-shrink-0 flex-shrink-0 flex-shrink-0 mx-2.5">
                              <!--[--><!--]--><span
                                class="absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform bg-indigo-500 dark:bg-indigo-400"><!--[-->
                              <!--]--></span></div><!--]--><!--[--><span class="text-sm truncate relative"><!----> indigo</span>
                            <!--]--><!----><!--[--><!----><!--]--><!--]--></button><!--]--><!----></div>
                      </div><!----></div>
                  </li>
                  <li class="smooth-dnd-draggable-wrapper !overflow-visible">
                    <div default-open="true" as="div">
                      <div as="template">
                        <div class="relative flex"><!--[-->
                          <button type="button"
                                  class="group group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                                  draggable="false"><!--[--><!--[-->
                            <div
                                class="relative inline-flex items-center justify-center flex-shrink-0 flex-shrink-0 flex-shrink-0 mx-2.5">
                              <!--[--><!--]--><span
                                class="absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform bg-violet-500 dark:bg-violet-400"><!--[-->
                              <!--]--></span></div><!--]--><!--[--><span class="text-sm truncate relative"><!----> violet</span>
                            <!--]--><!----><!--[--><!----><!--]--><!--]--></button><!--]--><!----></div>
                      </div><!----></div>
                  </li><!--]--></ul>
              </div>
            </li><!--]--></ul>
          <div class="flex-1"></div>
          <ul class="relative !min-h-[auto] !min-w-[auto]"><!--[-->
            <li tag="li" class="!overflow-visible">
              <div default-open="true" as="div">
                <div as="template">
                  <div class="flex"><!--[--><!--[--><a
                      class="group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                      draggable="false" href="/settings/members"><!--[--><!--[--><span
                      class="i-heroicons-plus flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span>
                    <!--]--><!--[--><span class="text-sm truncate relative"><!----> Invite people</span><!--]--><!---->
                    <!--[--><!----><!--]--><!--]--></a><!--]--><!--]--><!----></div>
                </div><!----></div>
            </li>
            <li tag="li" class="!overflow-visible">
              <div default-open="true" as="div">
                <div as="template">
                  <div class="flex"><!--[-->
                    <button type="button"
                            class="group relative flex items-center gap-1.5 px-2.5 py-1.5 w-full rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50"
                            draggable="false"><!--[--><!--[--><span
                        class="i-heroicons-question-mark-circle flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span>
                      <!--]--><!--[--><span class="text-sm truncate relative"><!----> Help &amp; Support</span><!--]-->
                      <!----><!--[--><!----><!--]--><!--]--></button><!--]--><!----></div>
                </div><!----></div>
            </li><!--]--></ul>
          <div class="flex items-center align-center text-center w-full flex-row sticky bottom-0">
            <div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><!----></div>
          <!--]--></div>
        <div class="flex items-center justify-between gap-x-1.5 flex-shrink-0 px-4"><!--[-->
          <div data-headlessui-state="" class="relative inline-flex text-left rtl:text-right w-full">
            <div id="headlessui-menu-button-nJaOAU8Fbyl-2" aria-haspopup="menu" aria-expanded="false"
                 data-headlessui-state="" class="inline-flex w-full" role="button"
                 data-n-ids="{&quot;nJaOAU8Fbyl-0&quot;:&quot;nJaOAU8Fbyl-2&quot;}"><!--[-->
              <button type="button"
                      class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center w-full">
                <!--[--><!--[--><span
                  class="relative inline-flex items-center justify-center flex-shrink-0 rounded-full h-5 w-5 text-[10px]"><img
                  class="rounded-full h-5 w-5 text-[10px]" src="https://avatars.githubusercontent.com/u/739984?v=4">
                <!----><!--[--><!--]--></span><!--]--><!--[--><span class="">Benjamin</span><!--]--><!--[--><span
                  class="i-heroicons-ellipsis-vertical w-5 h-5 ml-auto"></span><!--]--><!--]--></button><!--]--></div>
            <!----></div><!--]--></div>
      </div>
    </div><!--]--><!--[-->
    <div
        class="hidden md:block bg-transparent select-none absolute z-50 group w-[9px] h-full inset-y-0 -right-[5px] cursor-col-resize">
      <div
          class="group-hover:bg-gray-300 dark:group-hover:bg-gray-700 transition duration-200 absolute w-px h-full inset-x-0 mx-auto"></div>
    </div><!--]--></div>
</template>

<style scoped lang="scss">

</style>